<template>
  <div class="dashboard-container">
    <el-card class="out-card-title">
      <el-tabs
        v-model="activeName"
        class="outsourcingManagement-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="全单外协" name="1" />
        <el-tab-pane label="工序外协" name="2" />
      </el-tabs>
    </el-card>
    <el-card>
      <div class="card-title">
        <div class="title">实时数据</div>
        <div class="right">
          <span> 2023-01-01 11:11:11 </span>
          <i class="el-icon-refresh" />
        </div>
      </div>
      <el-row :gutter="20" class="row1" type="flex">
        <el-col :span="11">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="box-card1">
                <h1>239</h1>
                <p>预排订单数</p>
                <p>较昨日上升3个</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="box-card1">
                <h1>239</h1>
                <p>预排订单数</p>
                <p>较昨日上升3个</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="box-card1">
                <h1>239</h1>
                <p>预排订单数</p>
                <p>较昨日上升3个</p>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col
          :span="1"
          style="display: flex; align-items: center; justify-content: center"
        >
          <img src="@/assets/imgs/separator.png" alt="">
        </el-col>
        <el-col :span="11">
          <el-row :gutter="20" type="flex">
            <el-col :span="8">
              <div class="box-card2">
                <h1>239</h1>
                <p>预排订单数</p>
                <p>较昨日上升3个</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="box-card2">
                <h1>239</h1>
                <p>预排订单数</p>
                <p>较昨日上升3个</p>
              </div></el-col>
            <el-col :span="8">
              <div class="box-card2">
                <h1>239</h1>
                <p>预排订单数</p>
                <p>较昨日上升3个</p>
              </div></el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="order">
      <div class="card-title">
        <div class="title">客户订单量统计图</div>
        <div class="order-right">
          <span>维度筛选</span>
          <el-checkbox-group v-model="customerOrder.checkList">
            <el-checkbox label="季节">季节</el-checkbox>
            <el-checkbox label="品类">品类</el-checkbox>
          </el-checkbox-group>
          <el-date-picker
            v-model="customerOrder.time"
            type="year"
            placeholder="选择年"
          />
          <el-radio-group v-model="customerOrder.radioTime">
            <el-radio-button label="1">按月</el-radio-button>
            <el-radio-button label="2">按年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <order height="400px" width="100%" />
    </el-card>
    <el-card class="order category">
      <div class="card-title">
        <div class="title">业务层级下不同品类的订单量统计图</div>
        <div class="order-right">
          <span>维度筛选</span>
          <el-checkbox-group v-model="categoryOrder.checkList">
            <el-checkbox label="1">业务部门</el-checkbox>
            <el-checkbox label="2">业务人员</el-checkbox>
          </el-checkbox-group>
          <el-select v-model="categoryOrder.category" placeholder="请选择">
            <el-option
              v-for="item in categoryOrder.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="categoryOrder.time"
            type="year"
            placeholder="选择年"
          />
          <el-radio-group v-model="categoryOrder.radioTime">
            <el-radio-button label="1">按月</el-radio-button>
            <el-radio-button label="2">按年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <category id="category" height="400px" width="100%" />
    </el-card>
    <el-card class="order output">
      <div class="card-title">
        <div class="title">工厂下的不同品类的排产量统计图</div>
        <div class="order-right">
          <el-select v-model="outputOrder.type" placeholder="请选择">
            <el-option
              v-for="(item, index) in outputOrder.options"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="outputOrder.type" placeholder="请选择">
            <el-option
              v-for="(item, index) in outputOrder.options"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <outputs id="outputId" height="400px" width="100%" />
    </el-card>
    <el-card class="order capacity">
      <div class="card-title">
        <div class="title">计划与实际达成之间的差异和工厂剩余产能图</div>
        <div class="order-right">
          <el-select v-model="capacityOrder.capacity" placeholder="请选择">
            <el-option
              v-for="item in capacityOrder.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="capacityOrder.capacity" placeholder="请选择">
            <el-option
              v-for="item in capacityOrder.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="capacityOrder.time"
            type="year"
            placeholder="选择年"
          />
          <el-radio-group v-model="capacityOrder.radioTime">
            <el-radio-button label="1">实际产品</el-radio-button>
            <el-radio-button label="2">标准产品</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <capacity id="capacity" height="400px" width="100%" />
    </el-card>
  </div>
</template>

<script>
import order from '@/components/Charts/order'
import category from '@/components/Charts/category'
import outputs from '@/components/Charts/output'
import capacity from '@/components/Charts/capacity'
export default {
  name: 'Dashboard',
  components: { order, category, outputs, capacity },
  data() {
    return {
      customerOrder: {
        checkList: [],
        radioTime: '1'
      },
      categoryOrder: {
        checkList: [],
        options: [],
        radioTime: '1'
      },
      outputOrder: {},
      capacityOrder: {
        radioTime: '1'
      },
      activeName: '1'
    }
  },
  computed: {},
  created() {}
}
</script>
<style scoped lang="scss">
.el-card {
  margin-bottom: 20px;
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  .title {
    color: #171f31;
    font-size: 20px;
    font-weight: 800;
  }
  .right {
    color: #8fa1c9;
    font-size: 16px;
    i {
      color: #1b84ed;
    }
  }
}
.row1 {
  .box-card1 {
    width: 100%;
    height: 186px;
    background: linear-gradient(135deg, #f7fbff, #d2e9ff);
    border-radius: 20px;
    padding: 36px 38px 27px;
    h1 {
      font-size: 52px;
      margin-bottom: 25px;
      font-weight: 400;
    }
    p {
      margin-bottom: 10px;
      font-size: 16px;
    }
  }
  .box-card2 {
    width: 100%;
    height: 186px;
    background: linear-gradient(135deg, #f4fdfa, #dcfff5);
    border-radius: 20px;
    padding: 36px 38px 27px;
    h1 {
      font-size: 52px;
      margin-bottom: 25px;
      font-weight: 400;
    }
    p {
      margin-bottom: 10px;
      font-size: 16px;
    }
  }
}
.order {
  .order-right {
    display: flex;
    align-items: center;
    span {
      font-size: 16px;
      margin-right: 10px;
    }
    ::v-deep .el-date-editor {
      margin: 0 10px;
    }
  }
}
.category {
  .el-select {
    margin: 0 10px;
  }
}
.output {
  .order-right {
    ::v-deep .el-select {
      margin-left: 10px;
    }
  }
}
.capacity {
  ::v-deep .el-select {
    margin-left: 10px;
  }
}
</style>
